<template>
  <view class="TaskFiles">
    <view v-if="loading" class="TaskFiles-loading">
      <u-loading mode="flower" size="48" />
      <text>正在请求数据...</text>
    </view>
    <view v-else-if="files.length && !loading">
      <view v-for="(file, index) in files" :key="index" class="taskfiles-item" @click="fileClick(file)">
        <u-icon name="file-text-fill" color="#45B058" size="70" />
        <view>
          <view class="file-item-name" @click="fileName(file)">
            {{ fileName(file)[0] }}
            <text class="file-item-filetype">.{{ fileName(file)[1] }}</text>
          </view>
          <view class="file-item-size">{{ file.fileSize }}</view>
        </view>
      </view>

      <MyAction ref="action" @itemClick="actionClick" />
    </view>

    <view v-else-if="!files.length" class="TaskFiles-unup">
      <text>暂未上传文件</text>
    </view>

  </view>
</template>

<script type="text/ecmascript-6">
import MyAction from '@/components/shufei-action/action.vue';
import { fileView, downFile } from '@/utils/files';

export default {
  components: { MyAction },
  props: {
    files: {
      type: Array,
      default: () => []
    },

    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentFile: {}
    };
  },

  methods: {
    fileName(file) {
      return file.fileName.split(/\.(?=[^.]*$)/);
    },

    fileClick(file) {
      this.currentFile = file;
      const fileNameGroup = this.fileName(file);
      const fileName = fileNameGroup[0];
      const name = fileName.length > 15 ? fileName.slice(0, 15) + '...' : fileName;
      this.$refs.action.actionConfig = {
        title: name + ' .' + fileNameGroup[1],
        // summary: '订单支付已超过30分钟原则上不能退款，如有疑问请联系客服',
        type: 'fileClick',
        list: [
          { title: '预览', color: '#333333' },
          { title: '下载', color: '#333333' }
        ],
        // cancelColor: '#FF3D45',
        isBorderColor: true,
        specClass: 'show'
      };
    },

    actionClick(v, type) {
      if (type === 'fileClick') {
        const { id, originName: saveName } = this.currentFile;
        // v 0 预览 1 下载
        if (v === 0) {
          fileView(id);
        }

        if (v === 1) {
          downFile({
            saveName,
            id
          });
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.TaskFiles {
  font-size: 14px;
  .TaskFiles-unup {
    color: #606266;
    display: flex;
    align-items: center;
    > text {
      margin-left: 10px;
    }
  }
  .TaskFiles-loading {
    color: #606266;
    display: flex;
    align-items: center;
    > text {
      margin-left: 10px;
    }
  }

  .taskfiles-item {
    display: flex;
    margin-bottom: 10px;
    align-items: flex-start;
    width: 100%;
    > view {
      margin-left: 5px;
    }
    .file-item-size {
      color: #606266;
    }

    .file-item-name {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin-right: 30px;
      position: relative;
    }
  }

}
</style>
